<template>
  <div class="home">
    <back-to-top></back-to-top>
    <search-Head></search-Head>
    <swipe></swipe>
    <grid></grid>
    <seckill></seckill>
    <recommend></recommend>
    <menubar></menubar>
  </div>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  import menubar from '../../components/MenuBar.vue'
  import Swipe from './base/Swipe.vue'
  import Grid from './base/Grid.vue'
  import SearchHead from '../../components/Search/SearchHead.vue'
  import Recommend from './base/Recommend.vue'
  import Seckill from './base/Seckill.vue'
  import BackToTop from '../../components/backToTop/BackToTop.vue'
  export default {
    components: {
      menubar,
      Swipe,
      Grid,
      SearchHead,
      Recommend,
      Seckill,
      BackToTop
    },
    data() {
      return {}
    },
    methods: {
      ...mapMutations(['SET_GOODS_INFO']),
      async getGoodsInfo() {
        this.$api.homeData.goodsInfo().then(res => {
          this.SET_GOODS_INFO(res.data)
        })
      }
    },
    created() {
      this.getGoodsInfo()
    }
  }
</script>

<style scoped>
  .home {
    background-color: #F2F2F2;
  }
</style>
